<template>
  <div class="app-container">
    <el-form style="width:60%;margin: 30px auto 0" ref="form" :model="form" :rules="rule" label-width="140px">
      <el-form-item label="问题类型：" prop="bug_type">
        <el-select clearable v-model="form.bug_type">
          <el-option label="小程序" value="小程序"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题描述：" prop="bug_des">
        <el-input v-model="form.bug_des" clearable type="textarea" placeholder="请输入问题描述"/>
      </el-form-item>
      <el-form-item label="图片：" prop="bug_pic">
        <div class="clearfix">
          <div v-for="(item,key) in form.bug_pic"
               style="width:200px;height:230px;float: left;margin-left: 5px;text-align: center">
            <div style="width: 175px;height: 175px;position: relative">
              <img
                  style="cursor:pointer;max-width: 150px;max-height: 150px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto"
                  :src="item" @click="opendialogurl(item)">
            </div>
            <div class="del">
              <el-button style="margin:0 auto;" type="danger" @click="repairdespicRemove(item,key)">删除
              </el-button>
            </div>
          </div>
        </div>
        <div v-if="form.bug_pic.length<5" class="video-content" style="text-align: center">
          <el-upload class="uploader" ref="upload" accept=".jpg,.png" :show-file-list="false"
                     :action="action"
                     :before-upload="beforeUpload" :on-success="OnSuccess">
            <el-button type="primary">点击上传图片</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item style="text-align: center;padding-top: 75px">
        <el-button type="primary" @click="save()">提交
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog :append-to-body="true" :visible.sync="dialog">
      <div style="text-align: center">
        <img style="max-width: 500px;max-height: 500px" :src="dialogImage" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      action: this.$master + '/tools/UploadRK?type=customer',
      form: {
        bug_type: '',
        bug_des: '',
        bug_pic: [],
      },
      rule: {
        bug_type: [
          { required: true, message: '此项为必填项' }
        ],
        bug_des: [
          { required: true, message: '此项为必填项' }
        ],
        bug_pic: [
          { required: true, message: '此项为必填项' }
        ],
      },
      dialog: false,
      dialogImage: '',
    };
  },
  methods: {
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        let types = ['image/jpeg', 'image/png']
        let isimg = types.includes(file.type);
        if (!isimg) {
          this.$message.error('上传头像图片只能是 JPG和PNG 格式!');
          return isimg
        } else {
          resolve(file)
        }
      })
    },
    OnSuccess(r) {
      if (r.code === 0) {
        this.$message.success("上传成功");
        this.form.bug_pic.push(r.data.url)
      }
    },
    repairdespicRemove(file, i) {
      if (!file) {
        return false;
      }
      this.$confirm('是否删除此图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            this.$message.success("删除成功");
            this.$message({
              type: 'success',
              message: '删除成功',
            });
            this.form.bug_pic.splice(i, 1);
          })
    },
    opendialogurl(item) {
      this.dialog = true;
      this.dialogImage = item
    },
    save() {
      this.$post(this.$api + '/bug_submit/sub_bug', this.form)
          .then((data) => {
                if (data.code === 0) {
                  this.$notify({
                    title: '成功',
                    message: data.msg,
                    type: 'success'
                  });
                  this.form = {
                    bug_type: '',
                    bug_des: '',
                    bug_pic: [],
                  };
                } else {
                  this.$notify({
                    title: '失败',
                    message: data.msg,
                    type: 'error'
                  });
                }
              }
          )
    },
  }
};
</script>

<style scoped>

</style>
